<template>
  <div class="pickup-page">
    <div class="header">
      <div class="user-info">
        <div class="logo">
          <span class="logo-icon">📦</span>
          <span>校园快递代拿</span>
        </div>
        <div class="notification-icon" @click="showNotifications">🔔</div>
      </div>
      <div class="welcome-text">我要代拿</div>
      <div class="subtitle">接单赚取收益，帮助同学取快递</div>
    </div>

    <div class="main-content">
      <div class="back-btn" @click="$router.push('/')">
        <span>←</span> 返回首页
      </div>

      <div class="page-title">可接订单</div>

      <!-- 统计信息 -->
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-value">12</div>
          <div class="stat-label">本月接单</div>
        </div>
        <div class="divider"></div>
        <div class="stat-item">
          <div class="stat-value">¥86.5</div>
          <div class="stat-label">本月收益</div>
        </div>
        <div class="divider"></div>
        <div class="stat-item">
          <div class="stat-value">4.9</div>
          <div class="stat-label">平均评分</div>
        </div>
      </div>

      <!-- 筛选标签 -->
      <div class="filter-tabs">
        <div class="filter-tab active" @click="filterOrders('all')">全部订单</div>
        <div class="filter-tab" @click="filterOrders('accepted')">已接订单</div>
        <div class="filter-tab" @click="filterOrders('completed')">已完成订单</div>
        <div class="filter-tab" @click="filterOrders('high-price')">高价订单</div>
      </div>

      <!-- 订单列表 -->
      <div class="order-list" id="orderList">
        <!-- 订单1 - 待接单 -->
        <div class="order-card" data-status="waiting" data-price="8">
          <div class="order-header">
            <div class="order-id">订单号: 1001</div>
            <div class="order-status status-waiting">待接单</div>
          </div>
          <div class="order-content">
            <div class="order-info">
              <div class="express-company">顺丰快递 <span class="express-price">¥8.00</span> <span class="distance-badge">距离500m</span></div>
              <div class="item-info">大件物品 - L (大件)</div>
              <div class="pickup-code">取件码: 3-5-1024</div>
              <div class="pickup-info">取件地址: 东门快递点</div>
              <div class="delivery-info">送达地址: 10-205</div>
              <div class="time-info">期望送达时间: 今天 18:00前</div>
            </div>
          </div>
          <div class="order-actions">
            <button class="action-btn secondary-btn" @click="showOrderDetail(1001)">查看详情</button>
            <button class="action-btn primary-btn accept-btn" @click="acceptOrder(1001)">接单</button>
          </div>
        </div>

        <!-- 订单2 - 待接单 -->
        <div class="order-card" data-status="waiting" data-price="3">
          <div class="order-header">
            <div class="order-id">订单号: 1002</div>
            <div class="order-status status-waiting">待接单</div>
          </div>
          <div class="order-content">
            <div class="order-info">
              <div class="express-company">中通快递 <span class="express-price">¥3.00</span> <span class="distance-badge">距离300m</span></div>
              <div class="item-info">小件物品 - S (小件)</div>
              <div class="pickup-code">取件码: 9-2-5678</div>
              <div class="pickup-info">取件地址: 丰巢快递柜</div>
              <div class="delivery-info">送达地址: 9-309</div>
              <div class="time-info">期望送达时间: 今天 17:30前</div>
            </div>
          </div>
          <div class="order-actions">
            <button class="action-btn secondary-btn" @click="showOrderDetail(1002)">查看详情</button>
            <button class="action-btn primary-btn accept-btn" @click="acceptOrder(1002)">接单</button>
          </div>
        </div>

        <!-- 订单3 - 已接单 -->
        <div class="order-card" data-status="accepted" data-price="5">
          <div class="order-header">
            <div class="order-id">订单号: 1003</div>
            <div class="order-status status-accepted">已接单</div>
          </div>
          <div class="order-content">
            <div class="order-info">
              <div class="express-company">圆通快递 <span class="express-price">¥5.00</span> <span class="distance-badge">距离800m</span></div>
              <div class="item-info">中件物品 - M (中件)</div>
              <div class="pickup-code">取件码: 5-1-2468</div>
              <div class="pickup-info">取件地址: 邮局</div>
              <div class="delivery-info">送达地址: 9-305</div>
              <div class="time-info">期望送达时间: 今天 19:00前</div>
            </div>
          </div>
          <div class="order-actions">
            <button class="action-btn secondary-btn" @click="showOrderDetail(1003)">查看详情</button>
            <button class="action-btn primary-btn complete-btn" @click="completeOrder(1003)">确认送达</button>
          </div>
        </div>
      </div>

      <div class="platform-info">
        <p>校园快递代拿平台 © 2025</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'Pickup',
  methods: {
    showNotifications() {
      ElMessage.info('您有2条新订单通知')
    },
    
    filterOrders(type) {
      // 更新筛选标签状态
      document.querySelectorAll('.filter-tab').forEach(tab => {
        tab.classList.remove('active')
      })
      event.target.classList.add('active')
      
      // 这里可以添加实际的筛选逻辑
      ElMessage.info(`筛选: ${type}`)
    },
    
    showOrderDetail(orderId) {
      ElMessageBox.alert(`订单 ${orderId} 的详细信息`, '订单详情', {
        confirmButtonText: '确定'
      })
    },
    
    acceptOrder(orderId) {
      ElMessageBox.confirm(
        `确定要接取订单 ${orderId} 吗？`,
        '确认接单',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        ElMessage.success('接单成功！请及时前往取件并按时送达。')
        // 这里可以更新订单状态
      })
    },
    
    completeOrder(orderId) {
      ElMessage.info(`订单 ${orderId} 确认送达功能开发中...`)
    }
  }
}
</script>

<style scoped>
/* 复制您"我要代拿"页面的CSS样式到这里 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
}

.header {
  background: linear-gradient(135deg, #4a90e2, #5fa8ff);
  color: white;
  padding: 25px 20px;
  text-align: center;
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.logo-icon {
  margin-right: 8px;
  font-size: 20px;
}

.notification-icon {
  font-size: 20px;
  cursor: pointer;
}

.welcome-text {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
}

.subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.main-content {
  padding: 20px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  color: #4a90e2;
  cursor: pointer;
  font-size: 14px;
}

.back-btn span {
  margin-left: 5px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #4a90e2;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.divider {
  height: 30px;
  width: 1px;
  background-color: #f0f0f0;
}

.filter-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 12px 5px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
  white-space: nowrap;
}

.filter-tab.active {
  background: #4a90e2;
  color: white;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.order-id {
  font-size: 14px;
  color: #666;
}

.order-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 500;
}

</style>